<template>
  <!-- 底栏容器 -->
  <div>
    <el-container>
      <el-footer>
        <div class="footer">
          <div class="ng-promise-box">
            <div class="ng-promise">
              <p class="text">
                <a class="icon1" href="javascript:;">天津城建大学</a>
                <a class="icon2" href="javascript:;">天津市教育招生考试院</a>
                <a class="icon3" style="margin-right: 0" href="javascript:;">中国建设银行</a>
              </p>
            </div>
          </div>
          <div class="github">
            <a href="https://github.com/hai-27/vue-store" target="_blank">
              <div class="github-but"></div>
            </a>
          </div>
          <div class="mod_help">
            <p>
              <router-link to="/">首页</router-link>
              <span>|</span>
              <router-link to="/allCourse">全部项目</router-link>
              <span>|</span>
              <router-link to="/myCourse">我的</router-link>
            </p>
            <p class="coty">天津城建大学版权所有 &copy; 2023</p>
          </div>
        </div>
      </el-footer>
      <!-- 底栏容器END -->
    </el-container>
  </div>
</template>

<script>
export default {
  name: "FooterBar"
}
</script>

<style scoped>
@import "../../assets/css/index.css";
/* 底栏容器CSS */
.footer {
  width: 100%;
  text-align: center;
  background: #023b7c;
  padding-bottom: 20px;
}

.footer .ng-promise-box {
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}

.footer .ng-promise-box {
  margin: 0 auto;
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}

.footer .ng-promise-box .ng-promise p a {
  color: #fff;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url("../../assets/imgs/us-icon.png") no-repeat left 0;
}

.footer .github {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}

.footer .github .github-but {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background: url("../../assets/imgs/github.png") no-repeat;
}

.footer .mod_help {
  text-align: center;
  color: #888888;
}

.footer .mod_help p {
  margin: 20px 0 16px 0;
}

.footer .mod_help p a {
  color: #888888;
  text-decoration: none;
}

.footer .mod_help p a:hover {
  color: #fff;
}

.footer .mod_help p span {
  padding: 0 22px;
}

/* 底栏容器CSS END */
</style>